<template>
  <div class="tab-control">
    <div v-for="(item,index) in titles" :key="index"
    :class="{active: index === currentIndex}"
    @click="itemClick(index)"
    class="tab-control-item"
    >
        <span>{{item}}</span>
    </div>

  </div>
</template>
<script>
export default {
  name:'TabControl',
  props:{
      titles:{
        type:Array,
        default(){
          return []
        }
      }
   },
   data() {
     return {
       currentIndex:0
     }
   },
   methods: {
     itemClick(index){
        this.currentIndex = index
        // 注册事件,该事件是用来切换不同衣服的种类的,传入index,然后在父组件home里面用
        this.$emit('tabClick',index)
    }
   },
}
</script>
<style scoped>
 .tab-control{
    display: flex;
    text-align: center;
    height: 40px;

    font-size: 15px;
    background-color: #fff;
 }
 .tab-control-item{
   flex: 1;
 }
 .tab-control-item span{
   padding: 5px;
   display: inline-block;
   height: 30px;
   margin-bottom: 5px;
 }
 .active{
   color:var(--color-high-text);
 }
 .active span{
   border-bottom:3px solid var(--color-high-text)
 }
</style>
